<template>
  <div class="btn_view">
    <div class="flex">
      <img
        class="icon"
        src="https://imgs.nexbie.com/uploads/65a6692caf2c4c73b4e8c308634c3ab5.png"
        alt="" />
      <span class="desc ml-[8px]">Explore more features on the desktop website</span>
    </div>
    <div @click="goLogin" v-if="!isLoggedIn" class="login">Log in / Sign up</div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import { useUserStore } from '@/store/user';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  import { useLoginModal } from '@/composables/useLoginModal';
  import { isIOS } from '@/utils/tools';
  const userStore = useUserStore();
  const userInfo = computed(() => userStore.user);
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  const isIOSPhone = ref<boolean>(false);

  onMounted(() => {
    isIOSPhone.value = isIOS;
  });

  const goLogin = () => {
    // router.push('/login');
    const { showModal } = useLoginModal();
    showModal();
  };
</script>

<style scoped lang="scss">
  .androidBottom {
    padding: 11.5px 16px;
  }
  .iosBottom {
    padding: 11.5px 16px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .btn_view {
    padding: 11.5px 16px;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: fixed;
    bottom: 0;
    border-top: 1px solid var(---3, #e1e2e3);
    .login {
      display: flex;
      flex-shrink: 0;
      padding: 8px 12px;
      justify-content: center;
      align-items: center;
      border-radius: 40px;
      background: var(---, #f76b1b);
      color: var(---0, #fff);
      font-family: 'InterTight';
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .icon {
      width: 24px;
      height: 24px;
    }
    .desc {
      color: var(---9, #222);
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
    }
  }
</style>
